<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>浮动</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        ul {
            list-style: none;
            width: 460px;
            background-color: #0f0;
            margin: 50px auto;
        }
        
        ul li {
            width: 100px;
            height: 100px;
            background-color: #f00;
            float: left;
            box-sizing: border-box;
            margin: 5px 7.5px;
        }
        
        ul li:hover {
            border: 1px solid #000;
        }
        
        .clear::after {
            content: '';
            display: block;
            clear: both;
        }
        /* ul::before {
            content: '2';
        } */
    </style>
</head>

<body>
    <ul class="clear">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>8</li>
    </ul>


    <!-- 
		浮动  让一个元素  浮动起来 脱离文档流 按照文字的排列方式排列
		    依照特定的方向移动,直到触碰到父级边界或者其他浮动元素就停止
		float  left  right
		 1:必须给每个元素的宽高  距离 都得计算好
		 2.浮动元素如果 高度不统一 容易造成 布局坍塌
		 3.浮动的元素不能撑起 父级的高度,如果父级没有高度 那么 父级高度坍塌
		 计算元素高度的时候  浮动元素不参与计算
		  ① 给父级一个高度
		  ② 给父级添加 overflow:hidden;
		  ③ 给最后一个浮动元素后面  添加一个 块元素 给这个块元素添加一条样式 clear:both;
		  .clear::after{
		  	content: '';
		  	clear: both;
		  	display: block;
		  }
		  
		  浮动 功能  解决块元素不能再一行的问题
		      问题  浮动的元素无法撑起父级高度    浮动元素之间的距离必须计算好   浮动元素高度不统一换行容易卡住
		   
		 -->
</body>

</html>